<template>
    <div class="water">
        <tableHeightIndex
            :dataSource="dataSource"
            :tableColumns="tableColumns"
            :btnList="btnList"
            :pageSize="pageSize"
            :pageCount="pageCount"
            :pageNo="pageNo"
            btnListWidth="60"
            :selection="false"
            :height="curHeight"
        ></tableHeightIndex>

        <div class="echarts" :style="{height: curHeight + 'px', padding: '10px'}">
            <div class="rightTitle">
                <span>【2025-01-01 至 2025-02-05】 {{ type }}平衡能耗漏损率趋势分析</span>
                <label> <i class="el-icon el-icon-upload2 download"></i>&nbsp;&nbsp;导出 </label>
                <label> <i class="el-icon el-icon-printer printer"></i>&nbsp;&nbsp;打印 </label>
            </div>
            <img src="@/assets/images/controlCenter/refresh.png" class="refresh" />
            <waterBarEcharts :height="curHeight"></waterBarEcharts>
        </div>
    </div>
</template>

<script>
import tableHeightIndex from '@/components/customComponents/customeTable/tableHeightIndex.vue'
import {waterTable} from '@/mockData/monitorCenter'
import waterBarEcharts from './waterBarEcharts'
export default {
    props: ['type'],
    components: {
        tableHeightIndex,
        waterBarEcharts
    },
    data() {
        return {
            // table 相关参数  begin
            dataSource: waterTable,
            tableColumns: [
                {
                    prop: 'zbnh',
                    label: '总表能耗'
                },
                {
                    prop: 'fbznh',
                    label: '分表总能耗'
                },
                {
                    prop: 'zls',
                    label: '总漏损'
                },
                {
                    prop: 'zlsl',
                    label: '总漏损率'
                },
                {
                    prop: 'pjrls',
                    label: '评价日漏损'
                },
                {
                    prop: 'pjrlsl',
                    label: '评价日漏损率'
                }
            ],
            btnList: [],
            pageSize: 20,
            pageCount: 100,
            pageNo: 1,
            curHeight: (document.body.clientHeight - 169) / 2
        }
    },

    methods: {}
}
</script>

<style lang="scss"  scoped>
.water {
    display: flex;
    flex-direction: column;
    gap: 10px;
    .echarts {
        position: relative;
        background-color: #fff;
        .refresh {
            position: absolute;
            width: 20px;
            right: 20px;
            cursor: pointer;
        }
    }
    .rightTitle {
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin-bottom: 10px;

        span {
            text-align: center;
            font-weight: bold;
            font-size: 18px;
        }
        label {
            text-align: right;
            float: right;
            color: #3b8cfc;
            margin-right: 15px;
            cursor: pointer;
            font-size: 16px;
        }
        .printer {
            color: #3b8cfc;
        }
        .download {
            color: #3b8cfc;
        }
    }
}
</style>
